<template>
    <div>
        <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="请输入单据编号或客户名或备注"
            v-model="receiveOrderId" clearable>
        </el-input>
        <span class="demonstration">日期：</span>
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
            style="width: 200px;margin-right: 20px;">
        </el-date-picker>

        业务员：
        <el-select v-model="value" placeholder="业务员" style="width: 100px;margin-right: 20px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        审核状态：
        <el-select v-model="checkStatus" placeholder="审核状态" style="width: 100px;margin-right: 20px;">
            <el-option :value="0" label="未审核">
            </el-option>
            <el-option :value="1" label="已审核">
            </el-option>
        </el-select>
        <el-button type="primary" style="margin-left: 20px;float: right;" @click="searchPage(1, 5)">查询</el-button>
        <div style="clear: both;"></div>


        <hr style="margin-top: 10px">

        <div style="float: right;clear: both;margin-top: 10px">
            <el-button type="primary">新增</el-button>
            <el-button type="success">审核</el-button>
            <el-button type="">导出</el-button>
        </div>
        <br>
        <div style="clear: both;"></div>
        <el-table height="300px" :data="pageInfo.list" border style="width: 100%; font-size: 13px;margin-top: 10px;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column fixed prop="" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.id)" type="text" size="small">删除</el-button>
                    <el-button @click="updateType(scope.row.id)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="orderDate" label="单据日期" width="120">

            </el-table-column>
            <el-table-column prop="receiveOrderId" label="单据编号" width="120">
            </el-table-column>
            <el-table-column prop="providerName" label="供应商名称" width="120">
            </el-table-column>
            <el-table-column prop="totalMoney" label="金额" width="120">
            </el-table-column>
            <el-table-column prop="doName" label="制单人" width="120">
            </el-table-column>
            <el-table-column prop="checkName" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="yName" label="业务员" width="120">
            </el-table-column>
            <el-table-column prop="payMoney" label="已付金额" width="120">
            </el-table-column>
            <el-table-column label="收款状态" width="120">
                <template slot-scope="scope">
                    <span v-if="scope.reivedStatus === 1">全部收款</span>
                    <span v-if="scope.reivedStatus === 2">部分收款</span>
                    <span v-if="scope.reivedStatus === 3">未收款</span>
                </template>
            </el-table-column>


            <el-table-column prop="remark" label="备注" width="120">
            </el-table-column>
        </el-table>
        <div style="width: 100%;background-color: blanchedalmond;height: 30px;">
            <table style="width: 78.7%;height: 30px;">
                <tr>
                    <td style="width: 50%;">合计：</td>
                    <td style="width: 50%;">123</td>
                </tr>
            </table>
        </div>
        <el-pagination style="position: relative;left: 30px;" @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" layout="total, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>

</template>

<script>
import Top from './Top.vue';

export default {
    name: "WriteOff",
    components:
    {
        Top
    },
    data() {
        return {
            dialogFormVisible: false,
            choose: false,
            choose1: false,
            path: "",
            pageInfo: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },

            props: {
                label: 'name',
                children: 'zones'
            },
            count: 1,
            value1: '',
            value2: '',
        };
    },
    methods: {
        handleCurrentChange(val) {
            this.searchPage(val, 5)
        },
        handleClick: function (id) {
            // alert(id)
            if (confirm("是否删除")) {
                this.axios({
                    url: "/cash/otherOutForm/delete",
                    params: {
                        id: id
                    }
                }).then(rs => {
                    console.log(rs)
                    if (rs.data.code === 200) {
                        alert("删除成功")
                        this.searchPage(1, 5)
                    } else {
                        alert("删除失败")
                    }
                })
            }
        },
        updateType: function (id) {
            // alert(id)
            this.$router.push({ name: 'OtherOutU', query: { id: id } });
        },
        searchPage: function (pageNum, pageSize) {
            console.log(this.checkStatus)
            this.axios({
                url: "/cash/otherOutForm/otherOutByPage",
                params: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    receiveOrderId: this.receiveOrderId,
                    checkStatus: this.checkStatus
                }
            }).then(rs => {
                console.log(rs.data)
                this.pageInfo = rs.data.pageInfo
            })
        },
        goto() {

            this.$router.push(this.path)
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
        },
        handleNodeClick(data) {
            console.log(data);
        },

    },
    created: function () {
        this.searchPage(1, 5)

    }
}
</script>

<style>
tr {
    border: 1px solid black;
}
</style>